<template>
  <div class="exchange-record">
    <div class="exchange-record__header">
      <div className="exchange-record__header-jifen flex-center">礼品</div>
      <div className="exchange-record__header-desc flex-center">详细说明</div>
      <div className="exchange-record__header-time flex-center">记录时间</div>
    </div>
    <div class="exchange-record__content">
      <div v-for="item in data" :key="item.id" class="exchange-item">
        <div className="exchange-item__jifen flex-center">
          <image :src="item.imageUrl" />
        </div>
        <div className="exchange-item__desc flex-center">{{ item.title }}</div>
        <div className="exchange-item__time flex-center">
          {{ item.createdAt }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IExchangeItemRes } from "@/apis/types/jifen";

defineOptions({
  name: "exchange-record",
});

withDefaults(
  defineProps<{
    data: IExchangeItemRes[];
  }>(),
  {
    data: () => [],
  }
);
</script>

<style lang="less">
.exchange-record {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 28px;
  --jifen-label-flex: 1;
  --desc-label-flex: 3;
  --time-label-flex: 3;
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__header {
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;
    &-jifen {
      flex: var(--jifen-label-flex);
    }
    &-desc {
      flex: var(--desc-label-flex);
    }
    &-time {
      flex: var(--time-label-flex);
    }
  }
  &__content {
    width: 100%;
    height: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .exchange-item {
      // margin-top: 30px;
      width: 100%;
      padding: 10px 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e2e3e6;
      font-weight: 400;
      line-height: 40px;
      &__jifen {
        font-weight: bold;
        color: #f98a37;
        flex: var(--jifen-label-flex);
        image {
          width: 92px;
          height: 94px;
        }
      }
      &__desc {
        color: #8b8b8b;
        flex: var(--desc-label-flex);
      }
      &__time {
        color: #8b8b8b;
        flex: var(--time-label-flex);
      }
    }
  }
}
</style>
